<template>
  <div>
     <el-dialog :title="userTitle" width="60%" v-model="userFlag">
      <el-form label-width="120px" :model="addForm" :rules="rules" ref="userForm">
         <el-row>
          <el-col :span="12">
              <el-form-item label="用户昵称" prop="nickName">
                 <el-input v-model="addForm.nickName"></el-input>
              </el-form-item>
          </el-col>
            <el-col :span="12">
              <el-form-item label="归属部门">
                <el-tree-select :check-strictly="true" v-model="addForm.deptId"  :data="treeData"
                   row-key="id"
                   node-key="id"
                 >

                </el-tree-select>
              </el-form-item>
           
          </el-col>
          <el-col :span="12">
              <el-form-item label="手机号" prop="phonenumber">
                <el-input v-model="addForm.phonenumber"></el-input>
              </el-form-item>
          </el-col>
             <el-col :span="12">
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="addForm.email"></el-input>
              </el-form-item>
          </el-col>
             <el-col :span="12">
              <el-form-item label="用户名称" prop="userName">
                <el-input v-model="addForm.userName"></el-input>
              </el-form-item>
              </el-col>
              <el-col :span="12">
              <el-form-item label="密码" prop="password">  
                <el-input v-model="addForm.password" type="password"></el-input>
              </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="用户性别">
                 <el-select v-model="addForm.sex">
                   <el-option label="男" value="0"></el-option>
                   <el-option label="女" value="1"></el-option>
                    <el-option label="未知" value="2"></el-option>
                 </el-select>
                </el-form-item>
              </el-col>
                 <el-col :span="12">
                <el-form-item label="状态">
                 <el-radio-group v-model="addForm.status">
                  <el-radio value="0" label="正常"></el-radio>
                     <el-radio value="1" label="停用"></el-radio>
                 </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="岗位" >
                    <el-select :multiple="true" v-model="addForm.postIds">
                      <el-option v-for="item in postList" :label="item.postName" :value="item.postId"></el-option>
                    </el-select>
                </el-form-item>
              </el-col>
                <el-col :span="12">
                <el-form-item label="角色">
                    <el-select multiple v-model="addForm.roleIds">
                      <el-option v-for="item in roleList" :label="item.roleName" :value="item.roleId"> </el-option>
                    </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注">
                   <el-input type="textarea" v-model="addForm.remark"></el-input>
                </el-form-item>
              </el-col>
         </el-row>
      </el-form>
      <template #footer>
           <el-button type="primary" @click="toAddUser">确定</el-button>
            <el-button @click="userFlag=false">取消</el-button>
      </template>
     </el-dialog>
  </div>
</template>
<script setup>
  import {ref,reactive,defineExpose,defineEmits,watch} from 'vue'
  import mitt from '@/utils/mitt'
  import {addUser,getUser,updateUser} from '@/api/system/user'
  import {listPost } from '@/api/system/post'
  import {listRole} from '@/api/system/role'
  let userFlag=ref(false)
  let treeData=ref([])
 let userTitle=ref('添加用户')
  // 接收兄弟组件传递的值 岗位的树形数据
  mitt.on("sendTreeData",(tree)=>{
    console.log(tree,'传来值')
    treeData.value=tree

  })
  // 获取岗位列表接口
  let postList=ref([]) //岗位列表
  listPost().then(res=>{
    console.log(res,'岗位列表')
    postList.value=res.rows
  })
//  获取角色列表接口
  let roleList=ref([])
  listRole().then(res=>{
    console.log(res,'角色列表')
    roleList.value=res.rows
  })

  // 准备表单v-model的数据
   let addForm=reactive({
    userId:"",//用户id  修改接口使用的
    deptId: "" , //部门id
    email: "", //邮箱
    nickName: "",  //昵称
    password:"123456",  //密码
    phonenumber: "", //手机号
    postIds:[],  //岗位id数组
    remark: "", //备注
    roleIds: [] ,//角色id数组
    sex:"",             // 0男  1女 2未知
    status:"0",  //状态
    userName: "",  //用户名
   })

  //  表单验证
  let rules={
    userName:[{required:true, message:"用户名不能为空",trigger:"blur"}],
    password:[{required:true, message:"密码不能为空",trigger:"blur"}],
    nickName:[{required:true, message:"昵称不能为空",trigger:"blur"}],
    email:[{pattern:/^[\w.-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/, message:"邮箱要符合规则",trigger:"blur"}],
    phonenumber:[{pattern:/^1[3456789]\d{9}/, message:"手机号符合规则",trigger:"blur"}],
  }
  // 表单组件
  let userForm=ref()
  let emit=defineEmits(["updateList"])
  let toAddUser=()=>{
    // 表单验证
      userForm.value.validate(async (vali)=>{
          console.log(addForm,"收集数据")
        if(addForm.userId){ //修改接口
          let editRes=await updateUser(addForm)
          console.log(editRes,"修改成功接口")
        }else{
          
            // 添加用户接口
            let res=await addUser(addForm)
            console.log(res,"添加成功接口")
        }
       userTitle.value="添加用户"
        userFlag.value=false//关闭弹出层
        // 让父组件调用列表
        emit("updateList")
      })
  }

  // 点击修改调用的方法  调用获取用户详情接口 进行回显
  
  let toEdit=async (id)=>{
    console.log(id,"修改")
    userTitle.value="修改用户"
    userFlag.value=true
    // 调用获取用户详情接口  
    let res=await getUser(id)
    console.log(res,"用户详情")
    // 回显数据
    Object.assign(addForm,res.data)

    addForm.postIds=res.postIds //回显岗位

    addForm.roleIds=res.roleIds //回显角色
    console.log(addForm)
  }
 defineExpose({ //暴露的数据和方法
    userFlag,
    toEdit
  })
  // 关闭弹出层 清空表单
  watch(userFlag,(newVal)=>{
      if(!newVal){
    
        addForm.deptId= "" ;//部门id
        addForm.email= "" ; //邮箱
        addForm.nickName= ""  ;//昵称
        addForm.password="123456"  ;//密码
        addForm.phonenumber= "" ; //手机号
        addForm.postIds=[]  ;//岗位id数组
        addForm.remark= "" ;//备注
        addForm.roleIds= [] ;//角色id数组
        addForm.sex=""             ;// 0男  1女 2未知
        addForm.status="0"  ;//状态
        addForm.userId="";//用户id  修改接口使用的
        addForm.userName= ""  ;//用户名

      }
  })
</script>